<template>
	<view class="container">
		<u-toast ref="uToast" />
		<image src="../../static/tupian137.png" mode="widthFix" style="width: 100%;"> </image>
		<view class="box">
			<image src="../../static/tupian138.png" mode="widthFix"> </image>
		</view>
		<view class="number">
			<image src="../../static/tupian140.png" mode="widthFix"> </image>
			<input type="text" value="" v-model="username" placeholder="请输入用户名" />
		</view>
		<view class="password">
			<image src="../../static/tupian139.png" mode="widthFix"> </image>
			<u-input v-model="password" placeholder-style="font-size: 30rpx;
			" class="code" :type="type" height="36" :border="border" :custom-style="{color:'#666666'}" placeholder="请输入密码" />
		</view>
		<view class="login">
			<view class="" @click="enter">
				登录
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from "../../md5.js";
	export default {
		data() {
			return {
				username: '',
				password: '',
				type: 'password',
				border: false,
			}
		},
		methods: {
			enter() {
				console.log(this.username, this.password);
				//判断一下用户是否输入了电话号码如果没有直接中断
				if (this.username) {
					let _this = this;
					// _this.$store.dispatch('getTodos'); //触发接口获取用户的信息
					uni.request({
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'W-Program-Code': 1101,
							'W-App-Id': 1003,
							'W-Auth-Timestamp': new Date().getTime(),
							'W-Lang': 'zh_cn',
							'W-Release-Version': '1.0.0',
							'W-Auth-Key': '',
							'W-Auth-Signature': '',
						},
						url: this.$loginUrl + '/auth/login/teacherUserLogin',
						data: {
							loginUserName: _this.username,
							loginPassword: md5.hex_md5(_this.password),
						},
						method: 'post',
						success(res) {
							if (res.statusCode == 200) {
								console.log(_this.username, _this.password)
								console.log(res.data.data);
								uni.setStorage({
									key: 'host',
									data: res.data.data.program_info.hosts,
									success() {
										console.log('host缓存成功了');
									},
									fail() {
										console.log('缓存失败了')
									}
								});
								uni.setStorage({
									key: 'token',
									data: res.data.data.token,
									success() {
										console.log('成功了');
									},
									fail() {
										console.log('缓存失败了')
									}
								});
								uni.setStorage({
									key: 'user_id',
									data: res.data.data.user_id,
									success() {
										console.log('成功了');
										_this.$toLink('../index/index', {}, 3);
									},
									fail() {
										console.log('缓存失败了')
									}
								});
							} else if (res.statusCode == 500) {
								if (res.data.code == 11006) {
									// uni.navigateTo({
									// 	url: '../bangding/bangding'
									// })
									_this.$refs.uToast.show({
										title: res.data.message,
										type: 'error',
										position: 'top',
									})
								}
								_this.$refs.uToast.show({
									title: res.data.message,
									type: 'error',
									position: 'top',
								})
							} else {
								_this.$refs.uToast.show({
									title: res.data.message,
									type: 'error',
									position: 'top',
								})
							}


						}
					})
				} else {
					//如果用户没有输入电话号码直接弹框提示
					this.$refs.uToast.show({
						title: '请输入用户名',
						type: 'warning',
						position: 'top'
					})
					return;
				}

			}
		},
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100vh;

		.box {
			width: 100%;
			height: 398rpx;
			position: relative;

			image {
				position: absolute;
				width: 198rpx;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.number {
			width: 671rpx;
			height: 130rpx;
			border-bottom: 2px solid #F2F2F2;
			margin-left: 40rpx;
			position: relative;

			image {
				position: absolute;
				width: 38rpx;
				bottom: 21rpx;
				left: 5rpx;
			}

			input {
				position: absolute;
				bottom: 21rpx;
				left: 75rpx;
				font-size: 30rpx;
				color: #666666;
			}
		}

		.password {
			width: 671rpx;
			height: 130rpx;
			border-bottom: 2px solid #F2F2F2;
			margin-left: 40rpx;
			position: relative;

			image {
				position: absolute;
				width: 38rpx;
				bottom: 21rpx;
				left: 5rpx;
			}

			.code {
				position: absolute;
				bottom: 21rpx;
				width: 600rpx;
				left: 75rpx;
				font-size: 30rpx;
				color: #666666;
			}
		}

		.login {
			position: relative;
			width: 100%;
			height: 539rpx;

			view {
				position: absolute;
				width: 600rpx;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 60rpx;
				color: #ffffff;
				font-size: 30rpx;
				top: 170rpx;
				left: 75rpx;
				background: linear-gradient(to right, #2C78FE, #32B0FF);
			}

		}
	}
</style>
